import React, {useEffect, useState} from 'react';
import {AtIcon} from "taro-ui";
import Taro from '@tarojs/taro';
import {View, Image, Button} from '@tarojs/components'
import {RESOURCE_URL} from "../../constants/api";
import {platform} from '../../utils/platform-settting.service';
import './tab-bar.scss'

const TabBar = (props: any) => {

  const barList = ['pages/index/big', 'pages/index/index', 'pages/my/index/index']

  const [tabBarInfo, setTabBarInfo] = useState();
  const [pagePath, setPagePath] = useState();
  const [isBigIndexPage, setIsBigIndexPage] = useState();

  useEffect(() => {
    setTabBarInfo(props.tabBarInfo)
    setPagePath(props.pagePath)
    setIsBigIndexPage(props.isBigIndexPage)
  }, [props.tabBarInfo, props.pagePath, props.isBigIndexPage])

  const makePhone = (value) => {
    try {
      Taro.makePhoneCall({
        phoneNumber: value || platform.info.platformServicePhone
      })
    } catch (e) {
      Taro.showToast({title: '拨打电话失败', icon: 'none'})
    }
  }

  const routerPush = item => {
    if (item.pagePath === 'share' && process.env.TARO_ENV !== 'h5') {
      return false
    }
    if (item.pagePath && barList.indexOf(item.pagePath) > -1) {
      Taro.switchTab({url: '/' + item.pagePath})
    } else if (item.pagePath.indexOf("#") > -1) {
      makePhone(item.pagePath.replace("#", ""))
    } else {
      Taro.navigateTo({
        url: '/' + item.pagePath
      })
    }
  }

  return (
    <View
      className={`${tabBarInfo && 'bottom-tab'} ${isBigIndexPage ? 'isBigIndexPage' : ''}`}
    >
      {
        tabBarInfo && tabBarInfo.list && tabBarInfo.list.map((item, index) =>
          <Button key={index} onClick={() => routerPush(item)}
            className={`bottom-tab-item ${index === 2 && 'bottom-tab-item-center'}`}
            openType={`${item.pagePath == 'share' ? 'share' : ''}`}
          >
            <View className='bottom-tab-icon'>{item.isImage ? <Image mode='aspectFit' className='bottom-tab-icon-img'
              src={pagePath === item.pagePath ? RESOURCE_URL + item.selectedIcon : RESOURCE_URL + item.icon}
            /> :
              <AtIcon prefixClass='iconfont' value={pagePath === item.pagePath ? item.selectedIcon : item.icon}
                customStyle={`font-size: ${(index === 2 && isBigIndexPage) ? '50px' : tabBarInfo.iconSize + 'px'}`}
                color={pagePath === item.pagePath ? `${process.env.mainColor}` : tabBarInfo.color}
              />}</View>
            <View className='bottom-tab-item-text'
              style={`color: ${pagePath === item.pagePath ? `${process.env.mainColor}` : tabBarInfo.color};`}
            >
              {item.text}
            </View>
          </Button>
        )
      }
    </View>
  )
}

export default TabBar
